<template>
  <a-modal v-model:visible="visible" title="分享图片" :footer="false" @cancel="closeModal">
    <div class="share-modal">
      <h4>复制分享链接</h4>
      <a-typography-link copyable>
        {{ link }}
      </a-typography-link>
      <div class="divider" />
      <h4>手机扫码查看</h4>
      <a-qrcode :value="link" class="qrcode" />
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { defineProps, ref, withDefaults, defineExpose } from 'vue'

// 是否可见
const visible = ref(false)

// 打开弹窗
const openModal = () => {
  visible.value = true
}

// 关闭弹窗
const closeModal = () => {
  visible.value = false
}

/**
 * 定义组件属性类型
 */
interface Props {
  title: string
  link: string
}

/**
 * 给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
  title: () => '分享',
  link: () => 'https://laoyujianli.com/share/yupi',
})

// 暴露函数给父组件
defineExpose({
  openModal,
})

const { link } = props
</script>

<style scoped>
.share-modal {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
  text-align: center;
}

.share-modal h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 16px;
}

.divider {
  margin: 16px auto;
  width: 80%;
  border-top: 1px dashed #ccc;
}

/* 修改二维码样式，使其居中显示 */
.qrcode {
  display: block;
  margin: 16px auto;
}
</style>
